<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="../common/bootstrap_vue.jsp"></jsp:include>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>bootstrap-vue</title>
</head>
<body >
	<div class="container" id="container"><!-- main container start -->
		<h1 class="page-header">用户信息</h1><!-- header container start -->
		
		<!-- 查询条件 -->
		<div class="panel panel-default">
			<div class="panel-heading">查询条件</div>
			<div class="panel-body">
				<button id="search-btn" class="btn btn-primary" v-on:click="search"
					type="button">检索</button>
			</div>
		</div><!-- header container end -->
        
        <!-- 信息列表 -->
		<div class="panel panel-default"><!-- body container start -->
			<div class="panel-heading">用户信息列表</div>
			<div class="panel-body">
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>ID</th>
							<th>Name</th>
						</tr>
					</thead>
					<tbody v-for="record in recordSet">
						<tr>
							<td>{{record.id}}</td>
							<td>{{record.name}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div><!-- body container end -->
		
		<!-- 分页 -->
		<div id="app">
	      <vue-nav :cur="currentPageNo" :all="pageCount" :callback="callback"></vue-nav>
	      <p>{{msg}}</p>
	    </div>
	</div><!-- main container end -->
	
</body>

<link rel="stylesheet" type="text/css" href="/demo/css/vue-nav.css"></link>
<script src="/demo/js/vue/vue-nav.js"></script>
<script type="text/javascript" src="/demo/js/vue/user/user.js"></script>
</html>